<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Application State Save / Restore example
        </h1>
        <p>
            This page contains an example of saving and restoring application states
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="row">
        <div class="col-xs-2">
            <ul class="list-group">
                <a id="save" class="list-group-item">Save</a>
                <a id="restore" class="list-group-item">Restore</a>
            </ul>

            <div class="savedState">
                <select>
                    <option value='{"imageIdToolState":{"example://2":{"probe":{"data":[{"visible":true,"active":false,"handles":{"end":{"x":64.035618869664,"y":21.05592153169944,"highlight":true,"active":false}},"invalidated":true},{"visible":true,"active":false,"handles":{"end":{"x":65.59724509573118,"y":116.31512132179843,"highlight":true,"active":false}},"invalidated":true}]}}},"elementToolState":{"axial1":{"stack":{"data":[{"currentImageIdIndex":1,"imageIds":["example://1","example://2"]}]}},"axial2":{"stack":{"data":[{"currentImageIdIndex":1,"imageIds":["example://1","example://2"]}]}}},"elementViewport":{"axial1":{"scale":0.6403580980567946,"translation":{"x":-31.53882275758602,"y":-3.931383582470403},"voi":{"windowWidth":256,"windowCenter":127},"pixelReplication":false,"rotation":0,"hflip":false,"vflip":false},"axial2":{"scale":1,"translation":{"x":0,"y":0},"voi":{"windowWidth":256,"windowCenter":127},"pixelReplication":false,"rotation":0,"hflip":false,"vflip":false}}}' selected>Example 1: Probe points</option>
                    <option value='{"imageIdToolState":{"example://1":{"length":{"data":[{"visible":true,"active":false,"handles":{"start":{"x":159.84375,"y":87,"highlight":true,"active":true},"end":{"x":137.84375,"y":100,"highlight":true,"active":false}},"invalidated":true},{"visible":true,"active":false,"handles":{"start":{"x":103.84375,"y":66,"highlight":true,"active":false},"end":{"x":90.84375,"y":148,"highlight":true,"active":false}},"invalidated":true}]}},"example://2":{"length":{"data":[{"visible":true,"active":false,"handles":{"start":{"x":101.84375,"y":120,"highlight":true,"active":false},"end":{"x":144.84375,"y":55,"highlight":true,"active":false}},"invalidated":true},{"visible":true,"active":false,"handles":{"start":{"x":208.84375,"y":141,"highlight":true,"active":false},"end":{"x":81.84375,"y":163,"highlight":true,"active":false}},"invalidated":true},{"visible":true,"active":false,"handles":{"start":{"x":52.84375,"y":77,"highlight":true,"active":false},"end":{"x":88.84375,"y":109,"highlight":true,"active":false}},"invalidated":true}]}}},"elementToolState":{"axial1":{"stack":{"data":[{"currentImageIdIndex":1,"imageIds":["example://1","example://2"]}]}},"axial2":{"stack":{"data":[{"currentImageIdIndex":1,"imageIds":["example://1","example://2"]}]}}},"elementViewport":{"axial1":{"scale":1,"translation":{"x":0,"y":0},"voi":{"windowWidth":256,"windowCenter":127},"pixelReplication":false,"rotation":0,"hflip":false,"vflip":false},"axial2":{"scale":1,"translation":{"x":0,"y":0},"voi":{"windowWidth":256,"windowCenter":127},"pixelReplication":false,"rotation":0,"hflip":false,"vflip":false}}}'>Example 2: Length</option>
                </select>
            </div>
        </div>
        <div class="col-xs-10">
            <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="axial1"
                     style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
            <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="axial2"
                     style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!-- jquery - included to make things easier to demo, not needed or used by the cornerstone library but
is used by our example image loader-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>
<script src="../exampleMetaDataProvider.js"></script>

<script>

    function timeNow() {
        // http://stackoverflow.com/questions/10599148/how-do-i-get-the-current-time-only-in-javascript
        var d = new Date(),
            h = (d.getHours()<10?'0':'') + d.getHours(),
            m = (d.getMinutes()<10?'0':'') + d.getMinutes();
        return h + ':' + m;
    }

    var save = $("#save");
    var restore = $("#restore");

    var axialElement1 = $('#axial1').get(0);
    var axialElement2 = $('#axial2').get(0);

    var elements = [axialElement1, axialElement2];

    save.on("click", function() {
        console.log("Saving state");
        var appState = cornerstoneTools.appState.save(elements)
        var serializedState = JSON.stringify(appState);
        // console.log(serializedState);
        
        var select = $(".savedState select").get(0);
        var newOption = document.createElement("option");
        newOption.value = serializedState;
        newOption.text = "Saved at " + timeNow();
        select.appendChild(newOption);
    })

    restore.on("click", function() {
        console.log("Restoring state");
        var serializedState = $(".savedState select").find(":selected").val();
        var appState = JSON.parse(serializedState);
        cornerstoneTools.appState.restore(appState)
    })


    var axialImageIds = [
        'example://1',
        'example://2'
    ]

    var axialStack1 = {
        currentImageIdIndex : 0,
        imageIds: axialImageIds
    };
    var axialStack2 = {
        currentImageIdIndex : 1,
        imageIds: axialImageIds
    };

    // image enable the dicomImage element and the mouse inputs
    cornerstone.enable(axialElement1);
    cornerstone.enable(axialElement2);

    cornerstoneTools.mouseInput.enable(axialElement1);
    cornerstoneTools.mouseWheelInput.enable(axialElement1);

    cornerstone.loadImage(axialImageIds[0]).then(function(image) {
        // display this image
        cornerstone.displayImage(axialElement1, image);

        cornerstoneTools.probe.activate(axialElement1, 1);
        cornerstoneTools.length.enable(axialElement1);

        cornerstoneTools.pan.activate(axialElement1, 2);

        cornerstoneTools.zoom.activate(axialElement1, 4);

        // set the stack as tool state
        cornerstoneTools.addStackStateManager(axialElement1, ['stack']);

        cornerstoneTools.addToolState(axialElement1, 'stack', axialStack1);
        // Enable all tools we want to use with this element
        cornerstoneTools.stackScroll.activate(axialElement1, 1);
        cornerstoneTools.stackScrollWheel.activate(axialElement1);
    });

    cornerstoneTools.mouseInput.enable(axialElement2);
    cornerstoneTools.mouseWheelInput.enable(axialElement2);

    cornerstone.loadImage(axialImageIds[1]).then(function(image) {
        // display this image
        cornerstone.displayImage(axialElement2, image);

        cornerstoneTools.probe.activate(axialElement2, 1);
        cornerstoneTools.length.enable(axialElement2);

        cornerstoneTools.pan.activate(axialElement2, 2);
        cornerstoneTools.zoom.activate(axialElement2, 4);
        // set the stack as tool state
        cornerstoneTools.addStackStateManager(axialElement2, ['stack']);
        cornerstoneTools.addToolState(axialElement2, 'stack', axialStack2);

        // Enable all tools we want to use with this element
        cornerstoneTools.stackScroll.activate(axialElement2, 1);
        cornerstoneTools.stackScrollWheel.activate(axialElement2);
    });


</script>
</html>
